<!DOCTYPE html>
<html lang="en">

<head>
    <title>加华教育订课系统</title>
    <#include "/jh/app/components/meta.html" />
    <#include "/jh/app/components/stylesheets.html" />
    <link rel="stylesheet" href="/jh/app/stylesheets/courseList.css?v=3">
</head>

<body>
    <div id="app">
        <div class="top">
            <div class="am-g date theme-background-color1">
                <a class="am-u-sm-3" href="/jh/app/list/?date=${previous}&schoolId=${schoolId!}"><i class="am-icon-chevron-left"></i>&nbsp;前一天</a>
                <div class="am-u-sm-6">${date!} ${week1!''} {{weeDataString}}</div>
                <a class="am-u-sm-3" href="/jh/app/list/?date=${next}&schoolId=${schoolId!}">后一天&nbsp;<i class="am-icon-chevron-right"></i></a>
            </div>
            <ul class="am-avg-sm-${(schoolNum+1)!} tabs">
                <li>
                    <a type="button" class="am-btn am-btn-primary am-round am-btn-xs" role="button" href="/jh/app/list/?date=${date}&schoolId=" v-if="${schoolId!0} == 0">全部</a>
                    <a type="button" class="am-btn am-btn-default am-round am-btn-xs" role="button" href="/jh/app/list/?date=${date}&schoolId=" v-else>全部</a>
                </li>
                <li v-for="(item, index) in schools" :key="item.id">
                    <a type="button" class="am-btn am-btn-primary am-round am-btn-xs" role="button" :href="'/jh/app/list/?date=${date}&schoolId=' + item.id" v-if="item.id == ${schoolId!0}">{{ item.name }}</a>
                    <a type="button" class="am-btn am-btn-default am-round am-btn-xs" role="button" :href="'/jh/app/list/?date=${date}&schoolId=' + item.id" v-else>{{ item.name }}</a>
                </li>
            </ul>
        </div>
        <div class="list">
            <div class="am-g am-g-collapse item" v-for="(item, index) in list" v-key="item.id">
                <div class="am-u-sm-7 item-left">
                    <div class="title">{{ item.name }}</div>
                    <div class="subtitle">{{ item.topic }}</div>
                    <div class="info">{{ item.startTime }}~{{ item.endTime }} | {{ item.tags }}</div>
                    <div class="tags">
                        <span>已订:{{ item.joinCount }}</span>
                        <span v-if="item.limit != 0">剩余:{{ item.limit - item.joinCount < 0 ? 0 : item.limit - item.joinCount }}</span>
                    </div>
                </div>
                <div class="am-u-sm-5 item-right">
                    <div class="location"><i class="am-icon-map-marker"></i>&nbsp;{{ item.schoolName }}</div>
                    <div class="teacher" v-if="item.staffEngName != null">{{ item.staffEngName }}</div>
                    <div class="teacher" v-else-if="item.staffName != null">{{ item.staffName }}</div>
                    <div class="teacher" v-else-if="item.partTimeTeacherName != null">{{ item.partTimeTeacherName }}</div>
                    <div class="button-wrap">
                        <template v-if='item.isOnClass == 1'>
                            <button class="am-btn" style="background-color: gray">已上课</button>
                        </template>
                        <template v-if='item.isOnClass == 0'>
                            <button class="am-btn theme-background-color2" v-if="item.status == 1" @click="unsubscribe(item.name + ' ' + item.topic, item.id)">退订</button>
                            <button class="am-btn" style="background-color: #A0D468!important" v-else @click="subscribe(item.name + ' ' + item.topic, item.id)">+订课</button>
                        </template>
                    </div>
                </div>
            </div>
            <a type="button" class="am-btn am-btn-primary am-btn-block" href="/jh/app/history">订课记录</a>
            <br />
            <button type="button" class="am-btn am-btn-default am-btn-block" @click="onLogout()">退出登录</button>
        </div>
        <#include "/jh/app/components/footer.html" />
    </div>
    <#include "/jh/app/components/scripts.html" />
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                list: [],
                schools: []
            }
        },
        computed: {
            // 计算属性的 getter
            weeDataString: function() {
                var week = '${week}'
                if (week == 0) {
                    return '';
                } else if (week == 7) {
                    return '星期天';
                } else if (week == 1) {
                    return '星期一';
                } else if (week == 2) {
                    return '星期二';
                } else if (week == 3) {
                    return '星期三';
                } else if (week == 4) {
                    return '星期四'
                } else if (week == 5) {
                    return '星期五'
                } else if (week == 6) {
                    return '星期六'
                }
            }
        },
        mounted: function() {

            // for (var i = 0; i < this.list.length; i++) {
            //     var startDate = new Date();
            //     startDate.setTime(this.list[i].startTime);
            //     this.list[i].startTime = startDate.getHours() + ":" + startDate.getMinutes();
            //     var endDate = new Date();
            //     endDate.setTime(this.list[i].endTime);
            //     this.list[i].endTime = endDate.getHours() + ":" + endDate.getMinutes();
            // }
        },
        methods: {
            onLogout() {
                confirm("退出登录?", "确定", function() {
                    MtaH5.clickStat("app_logout")
                    this.window.location.href = '/jh/app/logout'
                })
            },
            subscribe(name, id) {
                confirm("您确定要订课 " + name + " 吗？", "订课", function() {
                    MtaH5.clickStat("app_join_course")
                    var param = Qs.stringify({
                        arrangeId: id
                    });
                    loading();
                    axios({
                            url: '/jh/app/submit',
                            method: 'post',
                            data: param,
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        })
                        .then(function(response) {
                            endLoading();
                            if (response.data.status == 200) {
                                remind("订课成功", function() {
                                    // window.location.href = "/jh/app/list?date=${date!}";
                                    window.location.reload()
                                });
                            } else if (response.data.status == 204) {
                                msg(response.data.msg);
                                console.log(response.data);
                            } else {
                                msg("提交失败");
                                console.log(response.data);
                            }
                        })
                        .catch(function(error) {
                            endLoading();
                            msg("提交失败");
                            console.log(error);
                        });
                })
            },
            unsubscribe(name, id) {
                confirm("您确定要退订 " + name + " 吗？", "退订", function() {
                    MtaH5.clickStat("app_cancel_course")
                    var param = Qs.stringify({
                        arrangeId: id
                    });
                    loading();
                    axios({
                            url: '/jh/app/cancel',
                            method: 'post',
                            data: param,
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        })
                        .then(function(response) {
                            endLoading();
                            if (response.data.status == 200) {
                                remind("退订成功", function() {
                                    // window.location.href = "/jh/app/list?date=${date!}";
                                    window.location.reload()
                                });
                            } else if (response.data.status == 204) {
                                msg(response.data.msg);
                                // console.log(response.data);
                            } else {
                                msg("提交失败");
                                // console.log(response.data);
                            }
                        })
                        .catch(function(error) {
                            endLoading();
                            msg("提交失败");
                            // console.log(error);
                        });
                })
            }
        }
    })
    </script>
    <script>
    app.list = ${list};
    var tag = '${student.tag!"xxx"}'
    var sortedList = [];
    for (var idx = 0; idx < app.list.length; idx++) {
        var info = app.list[idx];
        var tags = info.tags;
        if (tags.indexOf(tag) != -1) {
            sortedList.push(info)
        }
    }
    app.list = sortedList;
    app.schools = ${schools!};
    </script>
</body>

</html>